<template>
  <van-tabbar v-model="active" active-color="#000" inactive-color="#797d82">
    <!-- 
      icon可能需要第3方来完成
     -->
    <van-tabbar-item replace name="/homepage" to="/homepage" icon="wap-home"></van-tabbar-item>
    <van-tabbar-item replace name="/show" to="/show" icon="shop"
      ></van-tabbar-item
    >
    <van-tabbar-item replace name="/ticketfolder" to="/ticketfolder" icon="card"
      ></van-tabbar-item
    >
    <van-tabbar-item replace name="/news" to="/news" icon="more"
      ></van-tabbar-item
    >
    <van-tabbar-item replace name="/mine" to="/mine" icon="manager"
      ></van-tabbar-item
    >
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      active: '/homepage'
    }
  },
  watch: {
    '$route.path': {
      immediate: true,
      handler(url) {
        // 右侧的处理，是为了首页它是有二级路由的，它的地址和name值不一样，所以要进行处理操作
        this.active = '/' + url.split('/')[1]
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
